<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react介绍</title>
</head>
<body>
<h2>react:Facebook的开源框架</h2>
<h3>react特点</h3>
<ul><li>JSX(JavaScript XML)语法 ,react可以让我们用js的语法书写HTML</li>

<li>
 虚拟DOM(Virtual DOM)<br>顾名思义不是真的DOM结构,它不需要浏览器DOM Api的支持其实就是一个JS对象,该对象其实是一个在真实的DOM基础上的一个抽象层,用来反映真实的DOM结构,当页面数据发生变化的时候,
    React会通过diff算法比较出上一次
</li>
    <li>组件化</li>
    <li>灵活(React推崇 all in js)</li>

</ul>
<h3>浏览器的渲染机制: <br>1,DOM树:浏览器会将HTML代码解析成DOM树, <br>
2,css规则树:浏览器会将CSS代码解析为CSS规则树. <br>
    3,Render树:对Render树的各个节点进行布局,计算大小,位置等. <br>
    4,布局(layout):对Render树的各个节点进行布局,计算大小,位置等 <br>
    5.绘制(paint):根据计算出的规则,通过显卡将内容绘制到屏幕上 <br>
    其中4,5是最耗时间的 , <br>
    6,回流(reflow):浏览器上某个位置上的布局发生变化,浏览器会从根阶段开始计算该节点的布局,如:向页面中新增一个元素,从页面中删除一个元素,折叠内容只要操作了元素的位置或者大小,都将引起reflow. <br>
   7,重绘(repaint):只改变页面元素颜色,字体样式,只要
</h3>
<h3>
    React和Vue的比较:
</h3>
<p>1,数据是不可变的(immutable),数据流是单向的,如果想要修改react的数据,需要人为的触发更新数据的代码(setState)才能让react重新渲染视图</p>
<p>2,通过js操作一切</p>
<p>3,class组件/函数组件写法</p>
<p>4,react很多东西都交给社区去做,而Vue很多功能都是内置的.
react的路由(react-router-dom),状态管理(redux)

</p>


</body>
</html>